<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <!--引入富文本编辑器css-->
  <link href="https://cdn.staticfile.org/wangeditor5/5.1.23/css/style.min.css" rel="stylesheet">

  <style>
    .center{
      width: 1200px;
      margin: 0 auto;
    }
    #footer_center p{
      margin: 0;
    }
    #footer_center h3{
      color: white;
    }
    body{
      background-color: rgb(241,242,243);
    }
    .el-header{
      background-color: white;
    }
  </style>
</head>
<body>
<div id="app" >
  <el-container>
    <my-header></my-header>

    <el-main class="center" >
      <el-row gutter="20">
        <el-col span="20">
          <el-card>

            <!--标签页卡开始-->
            <el-tabs type="card" >
              <el-tab-pane :disabled="isEdit" label="轮播图" ></el-tab-pane>
            </el-tabs>
            <!--标签页卡结束-->
            <el-form label-width="200px">
              <el-form-item label="选择轮播图">
                <el-upload
                        action="/v1/upload"
                        name="file"
                        limit="1"
                        list-type="picture-card"
                        :on-success="handleSuccess"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="轮播图序号">
                <el-input placeholder="请输入序号" v-model="sort"
                          style="width: 200px"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="post()">上传</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </el-main>

    <el-footer style="height: 350px;background-color: darkgrey;padding:50px 0">
      <my-footer></my-footer>
    </el-footer>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入富文本编辑器js-->
<script src="https://cdn.staticfile.org/wangeditor5/5.1.23/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!--引入自己的js文件-->
<script src="js/my-header.js"></script>
<script src="js/my-footer.js"></script>

<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        isEdit:false,
        url:"",
        sort:""
      }
    },
    methods: {
      handleSuccess(response, file, fileList) {
        console.log(file);
        //把上传图片完成之后 得到的图片路径用变量记录
        v.url = response.data;
      },
      post() {
        if (v.url == "") {
          alert("请选择图片！");
          return;
        }
        axios.post('/v1/banners/insertBanner', { imgUrl: v.url, sort: v.sort }, {
          headers: {
            'Content-Type':  'application/json'
          }
        })
                .then(function (response) {
                  console.log(v.url);
                  if (response.data.code === 1) {
                    alert('添加成功！');
                  location.href = 'admin.html';
                  }
                })
                .catch(function (error) {
                  console.log(error);
                })
      },
      handleRemove(file, fileList) {
        v.url="";
        console.log(file, fileList);
        //发出删除文件的请求   file.response上传成功时服务器响应的内容ResultVO
        console.log(file.response);
        axios.get("/v1/upload/remove?url=" + file.response.data).then(function () {
          console.log("服务器文件删除完成!");
        })
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }


    },
    created:function () {
    }
  })
</script>
</html>